import classNames from 'classnames'
import { useLayoutEffect, useState } from 'react'

import type { IDistrictRankItemRender } from '../../AdministrativeAreaRanking'
import RankDataItem from '../RankDataItem'

interface RankBannerItemProps {
  groupItem: IDistrictRankItemRender[]
  rankMaxAverage: number
  groupIndex: number
  activeIndex: number
  groupLength: number
}

const GROUPITEMWIDTH = 916

const RankBannerItem: React.FC<RankBannerItemProps> = (props) => {
  const { groupItem, rankMaxAverage, groupIndex, groupLength, activeIndex } =
    props
  const [translateX, setTranslateX] = useState<number>(0)

  function _processIndex(
    activeIndexParam: number,
    indexParam: number,
    groupLength: number
  ): number {
    if (activeIndexParam === 0 && indexParam === groupLength - 1) {
      //当前是activeIndex是第一张，index是最后一张，返回-1，相差-1，表示二者相邻且index ===groupLength -1 在左侧
      return -1
    } else if (activeIndexParam === groupLength - 1 && indexParam === 0) {
      //当前页activeIndex是最后一张，index是第一张，返回length，相差1，表示二者相邻且index===0在右侧
      return groupLength
    } else if (
      indexParam < activeIndexParam - 1 &&
      activeIndexParam - indexParam >= groupLength / 2
    ) {
      // 如果，index在activeIndex前一页的前面，并且之间的间隔在一半页数即以上，则返回页数长度+1，这样它们会被置于最右侧  如activeIndexParam === 2，index===0的被放在最右侧
      return groupLength + 1
    } else if (
      indexParam > activeIndexParam + 1 &&
      indexParam - activeIndexParam >= groupLength / 2
    ) {
      // 如果，index在activeIndex后一页的后面，并且之间的间隔在一般页数即以上，则返回-2，这样它们会被置于最左侧 如activeIndexParam === 0， index===2的被放在最左侧
      return -2
    }
    return indexParam
  }

  //useLayoutEffect：渲染完成之前计算出is-active:z-index:2
  useLayoutEffect(() => {
    let currTranslateX = 0

    if (groupLength > 2) {
      const newIndex = _processIndex(activeIndex, groupIndex, groupLength)
      currTranslateX = GROUPITEMWIDTH * (newIndex - activeIndex)
      // console.log("--newIndex--activeIndex--currTranslateX--:", newIndex, activeIndex, currTranslateX)
    } else if (groupLength === 2) {
      if (activeIndex === 0) {
        currTranslateX = groupIndex === 1 ? GROUPITEMWIDTH : 0
      } else {
        currTranslateX = groupIndex === 1 ? 0 : GROUPITEMWIDTH
      }
    } else {
      currTranslateX = 0
    }
    setTranslateX(currTranslateX)
  }, [activeIndex, groupLength])

  return (
    <div
      className={classNames('rank-group-item', {
        ['is-active']: groupIndex === activeIndex && groupLength > 1,
        ['is-animating']: groupIndex === activeIndex && groupLength > 1
      })}
      style={{ transform: `translateX(${translateX}px)` }}
    >
      <div className="item-left">
        {groupItem.slice(0, 7).map((rankDataItem, rankDataIndex) => (
          <RankDataItem
            key={rankDataItem.regionCode}
            {...rankDataItem}
            rankMaxAverage={rankMaxAverage}
            rankDataIndex={rankDataItem.rankDataIndex}
          />
        ))}
      </div>
      <div className="item-divider"></div>
      <div className="item-right">
        {groupItem.slice(7).map((rankDataItem, rankDataIndex) => (
          <RankDataItem
            key={rankDataItem.regionCode}
            {...rankDataItem}
            rankMaxAverage={rankMaxAverage}
            rankDataIndex={rankDataItem.rankDataIndex}
          />
        ))}
      </div>
    </div>
  )
}

export default RankBannerItem
